require('./PageHome.styl');
import net from 'clientConfig/util/net';
import urllist from 'clientConfig/urllist';
import Business from 'pages/business';
import Notice from 'pages/notice';
import Mine from 'pages/mine';
import { Control } from 'react-keeper';

const ContentSvg = require('images/svg/mangement/payment.svg');
const monStorage = require('clientConfig/util/StoreData').monStorage;
const ui = require('clientConfig/util/jsapi/ui');
const { TabBar, Icon } = SaltUI;
var activeIndex = 0;
var number = 0;
class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            activeIndex: activeIndex,
            badge: number
        };
        this.tabBarItems = [
            { title: '通知提醒', icon: "./assets/svg/tabbar/message.svg", activeIcon: "./assets/svg/tabbar/message_sel.svg", badge: this.state.badge },
            { title: '管理主页', icon: "./assets/svg/tabbar/home.svg", activeIcon: "./assets/svg/tabbar/home_sel.svg", name: "detail" },
            { title: '个人中心', icon: "./assets/svg/tabbar/personal.svg", activeIcon: "./assets/svg/tabbar/personal_sel.svg", name: 'setting' }
        ];
        let title = this.tabBarItems[this.state.activeIndex].title;
        ui.setTitle({ title: title != "管理主页" ? title : "IT项目管理信息系统" });
        this.handleCb = this.handleCb.bind(this);
    }

    //tab选项卡切换
    onChange(activeIndex) {
        this.setState({ activeIndex })

    }
    render() {
        const tabBarStyle = {
            borderTop: '1px solid #d6d6d6'
        };
        const tabBarItemStyle = {
            titleStyle: { color: '#4D4D4D' },
            activeTitleStyle: { color: '#289BF1' },
            titleActiveStyle: {},
            iconStyle: {
                width: 24,
                height: 22,
            },
            iconActiveStyle: {},
        };
        ui.setTitle({ title: this.tabBarItems[this.state.activeIndex].title });
        return (
            <div className="home">
                {<TabBar tabBarStyle={tabBarStyle} activeIndex={this.state.activeIndex} onChange={this.onChange.bind(this)}>
                    {this.tabBarItems.map((item, index) => {
                        if (index == 0) {
                            return (
                                <TabBar.Item
                                    key={index}
                                    badge={this.state.badge}
                                    title={item.title}
                                    icon={item.icon}
                                    activeIcon={item.activeIcon}
                                    {...tabBarItemStyle}
                                />
                            )
                        } else {
                            return (
                                <TabBar.Item
                                    key={index}
                                    badge={item.badge}
                                    title={item.title}
                                    icon={item.icon}
                                    activeIcon={item.activeIcon}
                                    {...tabBarItemStyle}
                                />
                            )
                        }
                    })}
                </TabBar>}
                {this.state.activeIndex == 0 && <Notice handleBadgeCb={this.handleCb} />}
                {this.state.activeIndex == 1 && <Business />}
                {this.state.activeIndex == 2 && <Mine />}
            </div>
        );
    }
    handleCb(number) {
        if (number == 0) number = null;
        this.setState({ badge: number })
    }
    componentWillMount() {
    }

    componentDidMount() {
        //#warning
        ui.setLeft({ control: true, text: '返回' }, (isSuccessed, result) => {
            if (isSuccessed) {
                if (location.hash == "#/home") {
                    ui.close();
                } else {
                    Control.go(-1)
                }

            }
        })

    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
        activeIndex = this.state.activeIndex;
        number = this.state.badge;
    }
}
module.exports = Home;
